<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="7" :xs="24">
                <el-card class="box-card">
                    <div slot="header">个人信息</div>
                    <div>
                        <userAvatar class="user-Avatar-out" />

                        <div class="card-item">
                            <i class="el-icon-s-custom"></i> 用户名称:
                            <el-tooltip :content="user.nickName">
                                <span class="pull-right">{{ user.nickName }}</span></el-tooltip>
                        </div>
                        <div class="card-item">
                            <i class="el-icon-phone"></i> 手机号码:
                            <span class="pull-right">{{ user.phone }}</span>
                        </div>
                        <div class="card-item">
                            <i class="el-icon-message"></i> 用户邮箱:
                            <el-tooltip :content="user.email">
                                <span class="pull-right">{{ user.email }}</span></el-tooltip>
                        </div>
                        <div class="card-item">
                            <i class="el-icon-female"></i> 用户性别:
                            <span class="pull-right" v-if="user.userGender == 0">男</span>
                            <span class="pull-right" v-else-if="user.userGender == 1">女</span>
                        </div>
                        <div class="card-item">
                            <i class="el-icon-date"></i> 创建日期:
                            <span class="pull-right">{{ user.createTime }}</span>
                        </div>
                        <div class="card-item">
                            <i class="el-icon-date"></i> 用户简介:
                            <el-tooltip :content="user.userIntroduction">
                                <span class="pull-right">{{ user.userIntroduction }}</span></el-tooltip>
                        </div>
                    </div>
                </el-card>
            </el-col>

            <el-col :span="14" :xs="24">
                <el-card>
                    <div slot="header">基本资料</div>

                    <el-tabs v-model="activeTab">
                        <el-tab-pane label="个人信息" name="userInfo" label-width="100px">
                            <el-form ref="userInfoForm" :model="user" :rules="userInfoRules" label-width="100px">
                                <el-form-item label="用户昵称" prop="nickName">
                                    <el-input v-model="user.nickName" maxlength="30" />
                                </el-form-item>
                                <el-form-item label="手机号码" prop="phone">
                                    <el-input v-model="user.phone" maxlength="11" />
                                </el-form-item>
                                <el-form-item label="邮箱" prop="email">
                                    <el-input v-model="user.email" maxlength="50" />
                                </el-form-item>
                                <el-form-item label="性别" prop="userGender">
                                    <el-radio-group v-model="user.userGender">
                                        <el-radio :label=0>男</el-radio>
                                        <el-radio :label=1>女</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="用户简介" prop="userIntroduction">
                                    <el-input v-model="user.userIntroduction" type="textarea" maxlength="100" />
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="submitUserInfo">保存</el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>

                        <el-tab-pane label="修改密码" name="resetPwd">
                            <el-form ref="resetPwdForm" :model="updatePassword" :rules="resetPwdRules" label-width="100px">
                                <el-form-item label="旧密码" prop="oldPassword">
                                    <el-input v-model="updatePassword.oldPassword" placeholder="请输入旧密码" type="password"
                                        show-password />
                                </el-form-item>
                                <el-form-item label="新密码" prop="newPassword">
                                    <el-input v-model="updatePassword.newPassword" placeholder="请输入新密码" type="password"
                                        show-password />
                                </el-form-item>
                                <el-form-item label="确认密码" prop="confirmPassword">
                                    <el-input v-model="updatePassword.confirmPassword" placeholder="请确认新密码" type="password"
                                        show-password />
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="submitResetPwd">保存</el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>

                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
  
<script>
import { updateUser } from "@/api/user/user";

import userAvatar from "./userAvatar";

import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'

export default {
    name: "userSetting",
    components: {
        userAvatar,
    },
    data() {
        const equalToPassword = (rule, value, callback) => {
            if (this.updatePassword.newPassword !== value) {
                callback(new Error("两次输入的密码不一致"));
            } else {
                callback();
            }
        };

        return {
            user: this.$store.getters.userInfo,
            updatePassword: {
                oldPassword: undefined,
                newPassword: undefined,
                confirmPassword: undefined
            },
            activeTab: "userInfo",

            // 表单校验
            userInfoRules: {
                nickName: [
                    { required: true, message: "用户昵称不能为空", trigger: "blur" }
                ],
                phone: [
                    { message: "手机号码不能为空", trigger: "blur" },
                    {
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: "请输入正确的手机号码",
                        trigger: "blur"
                    }
                ],
                email: [
                    { message: "邮箱地址不能为空", trigger: "blur" },
                    {
                        type: "email",
                        message: "请输入正确的邮箱地址",
                        trigger: ["blur", "change"]
                    }
                ],
            },

            resetPwdRules: {
                oldPassword: [
                    { required: true, message: "旧密码不能为空", trigger: "blur" }
                ],
                newPassword: [
                    { required: true, message: "新密码不能为空", trigger: "blur" },
                    { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
                ],
                confirmPassword: [
                    { required: true, message: "确认密码不能为空", trigger: "blur" },
                    { required: true, validator: equalToPassword, trigger: "blur" }
                ]
            }
        };
    },
    created() {
    },
    methods: {
        submitUserInfo() {
            this.$refs["userInfoForm"].validate(valid => {
                if (valid) {
                    let userTestEntity = {
                        "nickName": this.user.nickName,
                        "phone": this.user.phone,
                        "email": this.user.email,
                        "userGender": this.user.userGender,
                        "userIntroduction": this.user.userIntroduction,
                    };
                    updateUser(userTestEntity).then(res => {
                        this.$store.commit('SET_USERINFO', this.user);
                        this.$message.success('个人信息修改成功');
                        location.reload();
                    });
                }
            });
        },
        submitResetPwd() {
            // 校验旧密码
            let oldPassword = Cookies.get("password");
            if (decrypt(oldPassword) !== this.updatePassword.oldPassword) {
                this.$message.warning('旧密码输入错误！');
                return;
            }
            this.$refs["resetPwdForm"].validate(valid => {
                if (valid) {
                    let userTestEntity = { "password": encrypt(this.updatePassword.newPassword) };
                    updateUser(userTestEntity).then(res => {
                        this.$message.success('密码修改成功');
                        // 更新cookie中保存的密码
                        Cookies.set("password", encrypt(this.updatePassword.newPassword), { expires: 30 });
                    });
                }
            });
        },
    }
};
</script>

<style>
.app-container {
    padding: 20px;
}

.box-card {
    overflow: hidden;
}

.user-Avatar-out {
    margin: 0 auto;
    width: 120px;
    height: 120px;
}

.card-item {
    border-bottom: 2px solid #e7eaec;
    padding: 10px 0px;
    font-size: 14px;
}

.pull-right {
    float: right;
    max-width: 160px;
    height: 20px;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
  